<template>
  <div id="app">
    <div>
      <span style="margin-top:20px;width:200px;display:inline-block">报警时间</span>
      <el-date-picker style="width:200px" v-model="baojingshijian" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
      </el-date-picker><br>
      <span style="margin-top:20px;width:200px;display:inline-block">倾斜角度</span>
      <el-input v-model="qingxiejiaodu" type="text" style="width:200px" size="mini"></el-input><br>
      <span style="margin-top:20px;width:200px;display:inline-block">电池电量</span>
      <el-input v-model="dianchidianliang" type="text" style="width:200px" size="mini"></el-input><br>

      <!-- <span style="margin-top:20px;width:200px;display:inline-block">阀门状态</span>
      <el-select style="width:200px" v-model="famenbaojing" placeholder="请选择">
        <el-option v-for="item in famenoptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br> -->

      <span style="margin-top:20px;width:200px;display:inline-block">疑似漏水报警</span>
      <el-select style="width:200px" v-model="loushuibaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>

      <!-- <span style="margin-top:20px;width:200px;display:inline-block">空管报警</span>
      <el-select style="width:200px" v-model="kongguanbaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br> -->

      <span style="margin-top:20px;width:200px;display:inline-block">消防栓采集数据失败报警</span>
      <el-select style="width:200px" v-model="caijishibaibaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>
      <span style="margin-top:20px;width:200px;display:inline-block">水压高报警</span>
      <el-select style="width:200px" v-model="shuiyayaobaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>

      <span style="margin-top:20px;width:200px;display:inline-block">撞击报警</span>
      <el-select style="width:200px" v-model="zhuangjibaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>
      <span style="margin-top:20px;width:200px;display:inline-block">imei号</span>
      <el-input v-model="imei" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">电池欠压报警</span>
      <el-select style="width:200px" v-model="dianchiqianyabaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>
      <span style="margin-top:20px;width:200px;display:inline-block">水压低报警</span>
      <el-select style="width:200px" v-model="shuiyadibaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select><br>
      <span style="margin-top:20px;width:200px;display:inline-block">恢复时间</span>
      <el-date-picker style="width:200px" v-model="huifushijian" type="datetime" placeholder="选择日期时间">
      </el-date-picker><br>
      <span style="margin-top:20px;width:200px;display:inline-block">水压</span>
      <el-input v-model="shuiya" type="text" style="width:200px" size="mini"></el-input><br>
      <span style="margin-top:20px;width:200px;display:inline-block">压力波动阀值</span>
      <el-input v-model="bodong" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">压力告警上限</span>
      <el-input v-model="jinggaoshangxian" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">压力告警下限</span>
      <el-input v-model="jinggaoxiaxian" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">上报时间</span>
      <el-date-picker style="width:200px" v-model="shangbaoshijian" type="datetime" placeholder="选择日期时间">
      </el-date-picker><br> <span style="margin-top:20px;width:200px;display:inline-block">上报间隔</span>
      <el-input v-model="shangbaojiange" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">信号强度</span>
      <el-input v-model="xinhaoqiangdu" type="text" style="width:200px" size="mini"></el-input><br> <span style="margin-top:20px;width:200px;display:inline-block">温度</span>
      <el-input v-model="wendu" type="text" style="width:200px" size="mini"></el-input><br>
      <span style="margin-top:20px;width:200px;display:inline-block">倾倒报警</span>
      <el-select style="width:200px" v-model="qingdaobaojing" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="send">发送请求</el-button>
    </div>
  </div>
</template>

<script>
import { sendData } from "@/api/collection/base/flDeviceInfo/index"
import { formatTime } from "@/utils/da-te.js"
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      options: [{
        value: 0,
        label: "不报警"
      }, {
        value: 1,
        label: "报警"
      }],
      famenoptions: [{
        value: 0,
        label: "关"
      }, {
        value: 1,
        label: "开"
      }],
      value: '',
      baojingshijian: "",
      qingxiejiaodu: "",
      dianchidianliang: "",
      shangbaoshijian: "",
      // famenbaojing: "",
      loushuibaojing: "",
      // kongguanbaojing: "",
      caijishibaibaojing: "",
      shuiyagaobaojing: "",
      zhuangjibaojing: "",
      imei: "",
      dianchiqianyabaojing: "",
      shuiyadibaojing: "",
      huifushijian: "",
      shuiya: "",
      bodong: "",
      jinggaoshangxian: "",
      jinggaoxiaxian: "",
      shangbaojiange: "",
      xinhaoqiangdu: "",
      wendu: "",
      qingdaobaojing: "",
      shuiyayaobaojing: "",


    }
  },
  methods: {
    send () {
      let arr = [];
      arr.push(this.imei)
      console.log(this.baojingshijian),
        console.log()
      let obj = {
        "alertDate": formatTime(this.baojingshijian),
        "angle": this.qingxiejiaodu,
        "battery": this.dianchidianliang,
        // "opening": this.famenbaojing,
        "leakAlarm": this.loushuibaojing,
        // "blankPipeAlarm": this.kongguanbaojing,
        "collectAlarm": this.caijishibaibaojing,
        "highLimitAlarm": this.shuiyayaobaojing,
        "hitAlarm": this.zhuangjibaojing,
        "imeis": arr,
        "lowBatteryAlarm": this.dianchiqianyabaojing,
        "lowLimitAlarm": this.shuiyadibaojing,
        "normalDate": formatTime(this.huifushijian),
        "pressure": this.shuiya,
        "pressureFluctuate": this.bodong,
        "pressureHighLimit": this.jinggaoshangxian,
        "pressureLowLimit": this.jinggaoxiaxian,
        "reportDate": formatTime(this.shangbaoshijian),
        "reportInterval": this.shangbaojiange,
        "signals": this.xinhaoqiangdu,
        "temperature": this.wendu,
        "toppleAlarm": this.qingdaobaojing
      }
      console.log(obj)
      sendData(obj).then((res) => {
        console.log(res)
        this.$message({
          type: res.code === 20000 ? "success" : "warning",
          message: res.message
        })
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
